<template>
    <c-dialog v-model:show="dialogFlag" v-if="dialogFlag" :title="title" @confirm="addUser" @close="close"
        :btnDisabled="type == 3" width="80%">
        <br/>
        <el-form ref="userForm" :rules="rules" :model="formData" label-width="100px">
            <el-form-item label="名称" prop="name">
                <el-input v-model="formData.name" :disabled="type == 3" />
            </el-form-item>
            <el-form-item label="分类" prop="categoryId">
                <category v-model="formData.categoryId" :pId="15" :returnLast="true" width="100%" :disabled="type == 3" @onChange="getCtgName"/>
            </el-form-item>
            <el-form-item label="价格" prop="unitPrice">
                <el-input v-model="formData.unitPrice" :disabled="type == 3" />
            </el-form-item>
            <el-form-item label="图片" prop="imageUrl">
                <upload-image ref="eleUpload" :immediately="false" v-model="formData.imageUrl"/>
            </el-form-item>
            <el-form-item label="内容" prop="content">
                <my-wangeditor v-if="showEditor" v-model="formData.content" width="100%"/>
            </el-form-item>
        </el-form>
    </c-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import cDialog from '@/components/custom/cDialog.vue'
import { message } from '@/utils/element'
import {saveGoods} from '@/api/goods'
import category from "@/components/custom/category.vue"
import uploadImage from "@/components/custom/UploadImgForStream.vue"
import myWangeditor from "@/components/custom/myWangeditor.vue"

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    title: String,
    editData: Object,
    type: Number // 操作类型：1为新增，2为编辑，3为查看
})
const emit = defineEmits(['update:show', 'success'])
const formData = ref({})
const showEditor = ref(false)
const eleUpload = ref(null)

onMounted(() => {

    if (props.type == 2 || props.type == 3) {
        formData.value = props.editData
        //Object.assign(formData.value,props.editData)
    }
    showEditor.value = true
})

// 验证手机号
const checkPhone = (rule, phone, callback) => {
    const myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    if (!myreg.test(phone)) {
        return callback(new Error('手机号输入有误'))
    } else {
        callback() // 验证通过
    }
}

const rules = ref({
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
        { min: 1, message: '最低1位字符', trigger: 'blur' },
        { max: 80, message: '最高80位字符', trigger: 'blur' }
    ],
    // contact: [
    //     { required: true, message: '请输入联系人', trigger: 'blur' }
    // ],
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { validator: checkPhone, trigger: 'blur' }
    ],
})

const userForm = ref(null)

const dialogFlag = ref(props.show)

const getCtgName = (arr)=>{
    formData.value.categoryName = arr[0].name
}

const addUser = () => {
    userForm.value.validate(async valid => {
        if (valid) {
            await eleUpload.value.uploadFile() // 上传图片
            formData.value.unitPrice = parseFloat(formData.value.unitPrice)
            const res = await saveGoods(formData.value)
            if(res.code == 0){
                message('数据保存成功',2)
                emit('success')
                close()
            }else{
                //message(res.msg,3) 
            }
        } else {
            message('请正确填写表单信息', 3)
        }
    })
}

const close = () => {
    emit('update:show', false)
}
</script>
<style lang="scss" scoped>
.mytips {
    font-size: 12px;
    color: #999;
}

.myitembox {
    display: flex;
    width: 100%;

    .myipitem {
        flex: 1;
    }

    .icontips {
        display: flex;
        padding: 0 0 0 4px;
        align-items: center;
    }
}
</style>
<style lang="scss">
.userFormItem {
    &.el-form-item--default {
        margin-bottom: 0;
    }
}
</style>